import React, { useRef, useState} from 'react';
import ProDescriptions from '@ant-design/pro-descriptions';
import { Form, Button, Input, Modal,Select } from 'antd';
import style from '../index.less';

const UpdateForm = ({
  onSubmit: handleUpdate,
  onCancel: handleUpdateModalVisible,
  updateModalVisible,
  values,
  type: type, //0:添加,1:编辑,2:查看,3:启动预约
}) => {
  const [form] = Form.useForm();
  const [statusList] = useState([{id:1,name:'是'},{id:2,name:'否',}]);
  const [editStatus, setEditStatus] = useState();
  const actionRef = useRef();
  const handleConfirm = async (fieldsValue) => {
   let params={
     ...values,
     ...fieldsValue,
   }
    handleUpdate(params);
  };
  const handleCancel = async () => {
    setEditStatus(false);
  };
  

  // const handleEditContent = () => {
  //   setEditStatus(
  //     !editStatus
  //       ? {
  //           editableKeys: ['id', 'state', 'state2', 'date', 'rate'],
  //           actionRender: () => null,
  //         }
  //       : false,
  //   );
  // };
  const EditRenderContent = () => {
    return (
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={values}
        onFinish={handleConfirm}
        autoComplete="off"
      >
        <Form.Item label="是否可预约" name="available_status" rules={[{ required: true, message: '请选择预约状态!' }]}>
          <Select placeholder="" allowClear>
            {statusList.map((item) => (
              <Select.Option value={item.id} key={item.id}>
                {item.name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            修改
          </Button>
        </Form.Item>
      </Form>
    );
  };

  const RenderContent = () => {
    return (
      <>
        <ProDescriptions
          column={2}
          title="基础信息"
          request={async () => {
            return Promise.resolve({
              success: true,
              data: values.profiles,
            });
          }}
          columns={[
            // {
            //   title: '车辆ID',
            //   key: 'text',
            //   dataIndex: 'car_id',
            // },
            {
              title: '所属部门',
              key: 'department',
              dataIndex: 'department',
            },
            {
              title: '车牌号',
              key: 'car_num',
              dataIndex: 'car_num',
            },
            {
              title: '所在地',
              key: 'location',
              dataIndex: 'location',
            },
            // {
            //   title: '车型',
            //   key: 'car_type',
            //   dataIndex: 'car_type',
            // },
            // {
            //   title: '操作',
            //   valueType: 'option',
            //   render: () => [
            //     <Button key="view" type="primary" onClick={handleEditContent}>
            //       调整可配置信息
            //     </Button>,
            //   ],
            // },
          ]}
        />
        <ProDescriptions
          actionRef={actionRef}
          form={form}
          column={2}
          title="软硬件版本"
          request={async () => {
            return Promise.resolve({
              success: true,
              data: values.sensors,
            });
          }}
          editable={editStatus}
          columns={[
            {
              title: '摄像头',
              key: 'cam_json',
              dataIndex: 'cam_json',
            },
            {
              title: 'Lidar',
              key: 'lidar_json',
              dataIndex: 'lidar_json',
            },
            {
              title: 'Radar',
              key: 'radar_json',
              dataIndex: 'radar_json',
              renderFormItem: () => {
                return <Input />;
              },
            },
            {
              title: 'Imu',
              key: 'imu_json',
              dataIndex: 'imu_json',
            },
            {
              title: 'GPS',
              key: 'gps_json',
              dataIndex: 'gps_json',
            },
            {
              title: '超声波',
              key: 'ultrasonic',
              dataIndex: 'ultrasonic',
            }
          ]}
        />
         <ProDescriptions
          actionRef={actionRef}
          form={form}
          column={2}
          title="运行状态"
          request={async () => {
            return Promise.resolve({
              success: true,
              data: values,
            });
          }}
          editable={editStatus}
          columns={[
            {
              title: '状态',
              key: 'sysinfo',
              dataIndex: 'sysinfo',
            },
          ]}
        />
        
        <ProDescriptions
          actionRef={actionRef}
          form={form}
          column={2}
          title="位置信息"
          request={async () => {
            return Promise.resolve({
              success: true,
              data: values.gps_pos,
            });
          }}
          editable={editStatus}
          columns={[
         
            {
              title: '经度',
              key: 'longitude',
              dataIndex: 'longitude',
            },
            {
              title: '纬度',
              key: 'latitude',
              dataIndex: 'latitude',
            },
          ]}
        />
        <ProDescriptions
          actionRef={actionRef}
          form={form}
          column={2}
          title="车辆实时诊断信息"
          request={async () => {
            return Promise.resolve({
              success: true,
              data: values,
            });
          }}
          editable={editStatus}
          columns={[
            {
              title: '诊断',
              key: 'logs',
              dataIndex: 'logs',
            },
          ]}
        />
         
        {editStatus && (
          <div className={style.btn_wrap}>
            <Button.Group>
              <Button type="primary" className={style.btn_edit} onClick={handleConfirm}>
                修改
              </Button>
              <Button type="primary" onClick={handleCancel}>
                取消
              </Button>
            </Button.Group>
          </div>
        )}
      </>
    );
  };

  return (
    <Modal
      width={640}
      bodyStyle={{ height: "400px", overflowY: "auto" }}
      destroyOnClose
      title={type == 0 ? '添加车辆信息' : type == 1 ? '编辑车辆信息' : '查看车辆信息'}
      visible={updateModalVisible}
      footer={null}
      onCancel={() => handleUpdateModalVisible()}
    >
      {type == 0 && <EditRenderContent />}
      {type == 1 && <EditRenderContent />}
      {type == 2 && <RenderContent />}
   
    </Modal>

  );
};

export default UpdateForm;
